<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css"/>
		<style type="text/css">
			.myFloat {
				overflow: hidden;
			}
			.myFloat span {
				float: left;
			}
			.myFloat i, .myFloat .mui-numbox {
				float: right;
				color: #ACACB4;
			}
			#history {
				float: right;
				color: #8cb33e;
			}
		</style>
	</head>
	<body>
        <div class="mui-navbar-inner mui-bar mui-bar-nav">
            <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                <span class="mui-icon mui-icon-left-nav"></span>
            </button>
            <h1 class="mui-center mui-title">
                语音问诊设置
            </h1>
            <a id="history" type="button" class="mui-btn-link mui-btn-nav mui-pull-right">
                历史
            </a>
        </div>
        <div class="mui-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <span></span>
                    <div class="mui-switch mui-switch-blue mui-active">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
            </ui>
            <ul class="mui-table-view myFloat">
                <li id='start' data-options='{}' class="mui-table-view-cell">
                    <span class="mui-navigate-right">开始时间</span>
                    <i>
                        点击选择开始时间
                    </i>
                </li>
                <li id='myEnd' data-options='{}' class="mui-table-view-cell">
                    <span class="mui-navigate-right">结束时间</span>
                    <i>
                        点击选择结束时间
                    </i>
                </li>
                <li class="mui-table-view-cell">
                    <span class="mui-navigate-right" style="margin-top: 8px;">问诊时长(分钟)</span>
                    <div class="mui-numbox" data-numbox-step='1'>
                    <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                    <input class="mui-numbox-input" type="number" />
                    <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <span class="mui-navigate-right" style="margin-top: 8px;">设置金额(元)</span>
                    <div class="mui-numbox" data-numbox-step='1'>
                    <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                    <input class="mui-numbox-input" type="number" />
                    <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                    </div>
                </li>
            </ul>
            <div id="sendMsg" class="mui-table-view-cell mui-action-back" style="text-align: center;margin-top: 10px;background-color: #007AFF; color: #fff;">
                <a>修改申请问诊</a>
            </div>
        </div>
        <script src="../../../js/mui.min.js"></script>
        <script src="../../../js/mui.picker.min.js"></script>
        <script type="text/javascript">
            document.getElementById("sendMsg").addEventListener("tap", function() {
            //打开关于页面
                mui.toast('申请提交成功');
            });
            document.getElementById("history").addEventListener("tap", function() {
                mui.openWindow({
                    url:'vocalDoctorHistory.html',
                    id:'vocalDoctorHistory.html',
                    extras:{
                    }
                })
            });
            mui('.mui-content .mui-switch').each(function() { //循环所有toggle
                //toggle.classList.contains('mui-active') 可识别该toggle的开关状态
                this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? '已开启' : '已关闭');
                /**
                * toggle 事件监听
                */
                this.addEventListener('toggle', function(event) {
                    //event.detail.isActive 可直接获取当前状态
                    this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? '已开启' : '已关闭');
                });
            });
        </script>
        <script type="text/javascript">
            (function($) {
                $.init();
                var result = $('#start i')[0];
                var resultEnd = $('#myEnd i')[0];
                var btnsStart = $('#start');
                var btnsEnd = $('#myEnd');
                btnsStart.each(function(i, btn) {
                        btn.addEventListener('tap', function() {
                            var optionsJson = this.getAttribute('data-options') || '{}';
                            var options = JSON.parse(optionsJson);
                            var id = this.getAttribute('id');
                            /*
                            * 首次显示时实例化组件
                            * 示例为了简洁，将 options 放在了按钮的 dom 上
                            * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                            */
                            var picker = new $.DtPicker(options);
                            picker.show(function(rs) {
                                /*
                                * rs.value 拼合后的 value
                                * rs.text 拼合后的 text
                                * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                                * rs.m 月，用法同年
                                * rs.d 日，用法同年
                                * rs.h 时，用法同年
                                * rs.i 分（minutes 的第二个字母），用法同年
                                */
                                result.innerText = rs.text;
                                /*
                                * 返回 false 可以阻止选择框的关闭
                                * return false;
                                */
                                /*
                                * 释放组件资源，释放后将将不能再操作组件
                                * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                                * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                                * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                                */
                                picker.dispose();
                            });
                        }, false);
                    });
                btnsEnd.each(function(i, btn) {
                        btn.addEventListener('tap', function() {
                            var optionsJson = this.getAttribute('data-options') || '{}';
                            var options = JSON.parse(optionsJson);
                            var id = this.getAttribute('id');
                            /*
                            * 首次显示时实例化组件
                            * 示例为了简洁，将 options 放在了按钮的 dom 上
                            * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                            */
                            var picker = new $.DtPicker(options);
                            picker.show(function(rs) {
                                /*
                                * rs.value 拼合后的 value
                                * rs.text 拼合后的 text
                                * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                                * rs.m 月，用法同年
                                * rs.d 日，用法同年
                                * rs.h 时，用法同年
                                * rs.i 分（minutes 的第二个字母），用法同年
                                */
                                resultEnd.innerText = rs.text;
                                /*
                                * 返回 false 可以阻止选择框的关闭
                                * return false;
                                */
                                /*
                                * 释放组件资源，释放后将将不能再操作组件
                                * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                                * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                                * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                                */
                                picker.dispose();
                            });
                        }, false);
                    });
                })(mui);
        </script>
    </body>
</html>